<template>
  <div>
    <!-- 搜索，轮播图S -->
    <div class="roll">
      <!-- 搜索框 -->
      <div class="search">
        <van-search
          v-model="value"
          :label="NowCity"
        placeholder="| 请输入小区或地址"
        background="#0000"
        >
        <template #left-icon>
          <van-icon name="arrow-down" color="#333"  @click="$router.push('/city')"/>
        </template>
      </van-search>
        <van-icon name="location-o" color="#fff" @click="$router.push('/map')"/>
      </div>
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in SwiperList" :key="index">
          <img :src="`http://liufusong.top:8080${item.imgSrc}`" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 搜索，轮播图E -->
    <!-- 整租，合租盒子S -->
    <div class="Whole">
      <van-grid icon-size="35px" :border="false">
        <van-grid-item
          :icon="item.icom"
          :text="item.text"
          v-for="(item, index) in $store.state.HomePageNav"
          :key="index"
          @click="JumpUser(item)"
        />
      </van-grid>
    </div>
    <!-- 整租，合租盒子E -->
  <div class="boxs">
    <!--租房小组，更多S -->
    <div class="Rental">
      <van-cell-group :border="false">
        <van-cell title="租房小组" value="更多">
          <template #default>
            <router-link to="/layout/findroom" :style="{ color: '#999' }"
              >更多</router-link
            >
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <!-- 租房小组，更多E -->
    <!-- 推荐房屋 -->
    <div class="recommend">
      <van-grid direction="horizontal" column-num="2" gutter="10px" clickable icon-size="50px">
        <van-grid-item :icon="`http://liufusong.top:8080${item.imgSrc}`" :text="`${item.title} ${item.desc}`"
        v-for="(item) in RentalList" :key="item.id">
        </van-grid-item>
      </van-grid>
    </div>
  </div>
  </div>
</template>

<script>
import { SwiperRequest, RentalRequest } from '@/api'
export default {
  name: 'Home',
  data () {
    return {
      active: 0,
      // 轮播图
      SwiperList: [],
      // 租房列表
      RentalList: [],
      value: '',
      // 当前城市
      NowCity: null
    }
  },
  async activated () {
    this.$nextTick(() => {
      this.NowCity = this.$store.state.NowCityOlny[0].label || '杭州'
    })
    // 判断登录状态
    this.$store.dispatch('UserRes')
    try {
      // 轮播图数据
      const res = await SwiperRequest()
      this.SwiperList = res.data.body
      // 租房小组数据
      const res1 = await RentalRequest()
      this.RentalList = res1.data.body
    } catch (err) {
      // console.log(err)
    }
  },
  methods: {
    JumpUser (item) {
      if (item.id === 4 && !this.$store.state.LoginState) {
        // 判断是否已登录，才能给发布
        this.$router.push({
          path: '/login'
        })
        return
      }
      this.$router.push({
        path: item.url
      })
      this.$store.state.showMe = false
    }
  }
}
</script>

<style lang="less" scoped>
.van-tabbar-item {
  /deep/ .van-tabbar-item__icon {
    font-size: 25px;
    background-color: rgba(255, 255, 255, 0);
  }
}
img {
  width: 100%;
}
// 轮播图
.roll {
  position: relative;
  .search {
    display: flex;
    position: absolute;
    top: 13%;
    left: 2%;
    width: 95%;
    height: 20px;
    z-index: 999;
    .van-search {
      width: 100%;
    }
  }
}
// 整租，合租盒子
.Whole {
  .van-grid {
    color: #09b16c;
    /deep/ .van-icon {
      width: 60px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      border-radius: 50%;
      background-color: #f2fbf7;
    }
    .van-cell {
      font-weight: 700;
      font-size: 16px;

    }
    /deep/ .van-grid-item__text {
    font-size: 15px;
  }
  }
}
// 租房小组，更多
.Rental {
  .van-cell{
    background-color: #f6f5f6;
  }
}
// 宫格图
.recommend{
  .van-grid{
    padding-bottom: 10px;
  }
  /deep/ .van-grid-item__text{
    width: 80px;
    font-size: 15px;
  }
}
// 租房小组背景色
.boxs{
  background-color:#f6f5f6;
}
</style>
